<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="slider" id="slider">
      <div class="slider__content" id="slider-content">
        <div class="slider__images">
          <div
            class="slider__images-item slider__images-item--active"
            data-id="1"
          >
            <img src="./1.jpg"/>
          </div>
          <div class="slider__images-item" data-id="2"">
            <img src="./1.jpg" />
          </div>
          <div class="slider__images-item" data-id="3">
            <img src="./1.jpg" />
          </div>
          <div class="slider__images-item" data-id="4">
            <img src="./1.jpg" />
          </div>
          <div class="slider__images-item" data-id="5">
            <img src="./1.jpg" />
          </div>
        </div>

        <div class="slider__text">
          <div class="slider__text-item slider__text-item--active" data-id="1">
            <div class="slider__text-item-head">
              <h3>Category 1</h3>
            </div>
            <div class="slider__text-item-info">
              <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore
                error, quae porro earum perspiciatis officia in voluptas et iste
                quia cupiditate sint deleniti tempora sapiente debitis
                accusamus, harum a ab?
              </p>
            </div>
          </div>
          <div class="slider__text-item" data-id="2">
            <div class="slider__text-item-head">
              <h3>Category 2</h3>
            </div>
            <div class="slider__text-item-info">
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi
                aliquam mollitia, eveniet autem a soluta. Ex minus esse illo
                facere. Dolorem quasi facere quaerat voluptatibus ut cum fugiat
                fuga necessitatibus?
              </p>
            </div>
          </div>
          <div class="slider__text-item" data-id="3">
            <div class="slider__text-item-head">
              <h3>Category 3</h3>
            </div>
            <div class="slider__text-item-info">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Exercitationem corporis aspernatur delectus officia cumque et,
                praesentium quo voluptatem fuga ullam tempore qui perferendis,
                dolore consequuntur nisi temporibus perspiciatis obcaecati ex.
              </p>
            </div>
          </div>
          <div class="slider__text-item" data-id="4">
            <div class="slider__text-item-head">
              <h3>Category 4</h3>
            </div>
            <div class="slider__text-item-info">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque,
                voluptatum, quaerat consequatur fuga vero eos sit enim,
                voluptates culpa eum debitis rerum adipisci sint aperiam
                laboriosam. Eligendi error quasi ab!
              </p>
            </div>
          </div>
          <div class="slider__text-item" data-id="5">
            <div class="slider__text-item-head">
              <h3>Category 5</h3>
            </div>
            <div class="slider__text-item-info">
              <p>
                БLorem ipsum dolor sit amet consectetur adipisicing elit. Culpa,
                sed! Voluptatem tempora eaque ad voluptatum officia maiores. Hic
                debitis aut accusamus corporis deleniti eius ipsum alias. Nam ut
                repellat eligendi.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="slider__move-left" id="left"><</div>
      <div class="slider__move-right" id="right">></div>

      <div class="slider__nav">
        <div class="slider__nav-dots" id="slider-dots">
          <div
            class="slider__nav-dot slider__nav-dot--active"
            data-id="1"
          ></div>
          <div class="slider__nav-dot" data-id="2"></div>
          <div class="slider__nav-dot" data-id="3"></div>
          <div class="slider__nav-dot" data-id="4"></div>
          <div class="slider__nav-dot" data-id="5"></div>
        </div>
      </div>
    </div>

    <script src="./script.js"></script>
  </body>
</html>